@import "demo/reset";
@import "demo/variables";
@import "demo/helpers/mixins";
@import "demo/helpers/grid";
@import "demo/helpers/shortcuts";
@import "demo/grid";
@import "demo/typo";

body {
  background: $background-color;
  font-family: $base-font-family;
  font-size: $base-font-size;
  line-height: $base-line-height;
  color: $text-color;
}

header#header {
  background: $main-color;
  color: #FFD270;
  font-family: $headings-font-family;
  font-weight: 700;
  letter-spacing: $headings-letter-spacing;
  text-align: center;
  font-size: 70px;
  line-height: 60px;
  padding: 50px 30px;
  margin: 0 0 30px 0;

  h1 {
    color: #FFD270;
    font-size: 70px;
    line-height: 90px;
    font-weight: 700;

    &::after {
      background: transparentize(#FFD270, 0.25);
    }
  }

  h2 {
    color: transparentize(#FFD270, 0.5);
  }
}

footer#footer {
  background: #DDD;
  color: #888;
  padding: 30px 0;
  margin-top: 30px;

  a {
    &, &:visited {
      color: #888;
    }
  }
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

p.help {
  color: #999;
}

#toggleDropify {
  font-size: 12px;
  text-transform: uppercase;
  background: #DDD;
  color: #888;
  font-weight: bold;
  border: 0;
  padding: 6px 10px;
  border-radius: 4px;
  margin-left: 10px;
  transition: background 0.1s linear;

  &:hover {
    background: #EEE;
  }
}

@media (max-width: 480px) {
  header#header {
    padding: 30px 15px;

    h1 {
      font-size: 44px;
      line-height: 70px;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }

    h2 {
      font-size: 20px;
    }
  }
}

